Status barを作る | scrapVim
実装
View
見た目は各人が自由に変えられるようにする
とりあえず今考えている見た目
scrapboxのheaderの下に表示する
ページ下部だと見にくい
<div> で組むのが妥当か
<nav> はもう使っているし、 <header> はなにか違う
position: sticky で固定できる
表示する情報
mode
入力中のkey
カーソルの行数と列数
status-bar.html<div id="scrapvim-status-bar" class="vim-status-bar">
<div class="mode-viewer">
</div>
<div class="command-viewer">
</div>
</div>
status-bar.css.vim-status-bar {
position: sticky;
margin-top: 0px;
margin-bottom: 0px;
display: flex;
}
.vim-status-bar .mode-viewer {
display: block;
flex-shrink: 4;
}
.vim-status-bar .mode-viewer {
display: block;
flex-shrink: 4;
}
statusBar.jsexport class StatusBar {
constructor() {}
render() {
const statusBar = document.getElementById('scrapvim-status-bar') ??
}
}
scrapboxのheaderを真似てみよう
Model
Status barに出す情報を取得できるpropertyを用意する
とりあえず表示したい情報
cursorの位置
入力したキー
現在のmode